<template >
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片式图 -->
    <el-card>
      <!-- 角色按钮 -->
     
     
    </el-card>
    <!-- 分配权限的对话框 -->

    <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  >
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

  </div>
</template> 
<script>
import { async } from 'q';
import { watchFile } from 'fs';
export default {
  data() {
    return {
      dialogVisible:false,
      setRightDialogVisible:false,
      rolesList: [],
      rightsList:[],
      treeProps: {
        label: 'authName',
        children: 'children'
      },
      // 默认选中的节点Id值数组
      defKeys: [],
      // 当前即将分配权限的角色id
      roleId: ''
    }
  },
  created() {
    this.getRolesList()
  },
  methods: {
    async getRolesList() {
      const { data: res } = await this.$http.get('roles')
      // console.log(res)
      this.rolesList = res.data
    },
    async removeRightById(role,rightId) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
      {
        confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }
      ).catch(err=>err)
      if(confirmResult !=='confirm') {
        return this.$message.info('取消了删除')
      }
      const {data:res} = await this.$http.delete(
        `roles/${role.id}/rights/${rightId}`
      )
      if(res.meta.status !==200) {
        return this.$message.error('删除权限失败')
      }
      role.children= res.data
    },
    //展示分配权限
    async showSetRightDialog(role) {
      this.roleId=role.id
      console.log(this.roleId);
      const {data:res} = await this.$http.get('rights/tree')
      if(res.meta.status !==200) {
        return this.$message.error('获取权限数据失败')
      }
      // 把获取到的权限数据保存到 data 中
      this.rightsList=res.data
      console.log(this.rightsList);
        // 递归获取三级节点的Id
        // this.getLeafkeys(role,this.defkeys)
        this.dialogVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
.el-tag {
  margin: 7px;
}

.bdtop {
  border-top: 1px solid #eee;
}

.bdbottom {
  border-bottom: 1px solid #eee;
}

.vcenter {
  display: flex;
  align-items: center;
}
</style>